
<template>
  <div class="app-container ">
    <el-tabs v-model="activeName" class="home-full thNowrap hasTab" @tab-click="handleClick">
      <!-- Reminder -->
      <el-tab-pane v-if="userType !== 'ATHLETE'" label="Reminder" name="Reminder" :default-sort="{prop: 'date', order: 'ascending'}">
        <div class="filter-container">
          <el-input v-model="reminderListQuery.keyword" placeholder="Keyword" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
          <el-button class="filter-item" type="success" icon="el-icon-search" @click="handleFilter">
            Search
          </el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="reminderList"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          stripe
          @sort-change='sort_change'
        >
          <el-table-column align="center" fixed="left" label="CaseID" prop="subscribeId" sortable="custom" min-width="150">
            <template slot-scope="scope">

               <a  @click="onLook(scope.row.id,scope)">
                <!-- <div style="display: flex;align-items: center"  :class="scope.row.isLook?'mail_icon read': 'mail_icon'" v-if="scope.row.type === 'PASSPORT' || scope.row.type === 'HOME_PERMIT'"> {{ scope.row.idPrefix }}
                 </div>
                 <router-link v-else style="display: flex;align-items: center" tag="a" :class="scope.row.isLook?'mail_icon read': 'mail_icon'"   :to='getMedicalUrl( scope.row.subscribeId, scope.row.subscribeType, scope.row.type, userType)'> {{ scope.row.idPrefix }}
                   </router-link> -->
               <router-link  style="display: flex;align-items: center" tag="a" :class="scope.row.isLook?'mail_icon read': 'mail_icon'"   :to="scope.row.type === 'PASSPORT' || scope.row.type === 'HOME_PERMIT'?'setting/edit?member='+ scope.row.memberId+'&memberType=ID':getMedicalUrl(scope.row.subscribeId, scope.row.subscribeType, scope.row.type, userType)"> {{ scope.row.idPrefix }}
                 </router-link>
               </a>

            </template>
          </el-table-column>
          <el-table-column label="Creator" prop="creatorName" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.creatorName || '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="Action" prop="category" sortable="custom" width="160">
            <template slot-scope="scope">
              {{ scope.row.category || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Athlete" prop="athleteName" sortable="custom" width="150">
            <template slot-scope="scope">
              {{ scope.row.athleteName || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="中文名稱" prop="athleteTcName" sortable="custom" width="100">
            <template slot-scope="scope">
              {{ scope.row.athleteTcName || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Sport" prop="sport" sortable="custom">
            <template slot-scope="scope">
              {{ scope.row.sport || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="Person In Charge" prop="personInCharge" sortable="custom" min-width="150">
            <template slot-scope="scope">
              {{ scope.row.personInCharge || '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="ID Type" prop="idType" sortable="custom" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.idType || '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="Expiry Date" prop="expiryDate" sortable="custom" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.expiryDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Review Session" prop="reviewSession" sortable="custom" min-width="140">
            <template slot-scope="scope">
              {{ scope.row.reviewSession | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Issue Date" prop="cts" sortable="custom" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.cts | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="Short Report" prop="shortReport" sortable="custom" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.shortReport || '-' }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="" width="60">
            <template slot-scope="scope">
              <div style="text-align: center;">
                <el-button type="text" size="small" @click="del(scope.row.id)">
                  <img src="../../assets/images/del.svg" class="btn-icon">
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="sizes, prev, pager, next"
          :page-size="reminderListQuery.limit"
          :current-page="reminderListQuery.page"
          :page-sizes="[25, 50, 100]"
          :total="reminderListQuery.total"
          class="pagination-container"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-tab-pane>
      <!-- Profile -->
      <el-tab-pane label="Profile" name="Profile" class="home-profile">
          <profile/>
      </el-tab-pane>
      <!-- Training schedule -->
      <el-tab-pane label="Training schedule" name="TrainingSchedule">
      <TrainScheduleComponents v-if='activeName==="TrainingSchedule"' :homeTab='activeName' />
    </el-tab-pane>

    </el-tabs>
  </div>

</template>

<script>
    import profile from './profileDetails'
    import TrainScheduleComponents from '../trainSchedule'
    import store from '@/store'
    import { getReminderList, delReminder, lookReminder } from '@/api/home'
    // import EditProfile from './editProfile'
    import { getUserInfoid } from '@/api/setting'
    import { getInfo } from '@/api/user'
    import { getMedicalUrl } from '@/utils'
    export default {
        components: {
          profile,
          TrainScheduleComponents
        },
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'gray',
                    deleted: 'danger'
                }
                return statusMap[status]
            }
        },
        data() {
            return {
                list: null,
                interList: null,
                reminderList: null,
                getMedicalUrl,
                reminderListQuery: {
                    page: 1,
                    limit: 25,
                    keyword: '',
                    sorting: '',
                    column: ''
                },
                listQuery: {
                    page: 1,
                    limit: 25
                },
                listLoading: true,
                activeName: 'Reminder',
                isActiveName: 'Reminder',
                edit: false,
                radio: '1',
                radio1: '1',
                total: 20,
                profile: '',
                gridData: [{
                      date: '2019/08/10',
                      name: 'Active'
                  }, {
                      date: '2019/07/22',
                      name: 'Suspended'
                }],
                currentSportData: [{
                    date: '2019/08/10',
                    name: 'Booda'
                }, {
                    date: '2019/07/22',
                    name: 'Tennis'
                }],
                userType: store.getters.userType,
                isShow: false
            }
        },
        watch: {
            activeName(val) {
                this.$router.push(`${this.$route.path}?page=${val}`)
            }
        },
        created() {
            const query = this.$route.query
            if (query.page) {
                this.activeName = query.page
                this.isActiveName = query.page
            }
           this.fetchData()
        },
        methods: {
            fetchData() {
                if (this.activeName === 'Reminder' && this.userType !== 'ATHLETE') {
                    this.listLoading = true
                    getReminderList({
                        keyword: this.reminderListQuery.keyword,
                        page: this.reminderListQuery.page,
                        size: this.reminderListQuery.limit,
                        sorting: this.reminderListQuery.sorting,
                        column: this.reminderListQuery.column
                    }).then(response => {
                        if (response.status === 0) {
                            const data = response.result;
                            let reminderList = []
                            this.reminderListQuery.total = data.total ? data.total : this.reminderListQuery.total
                          reminderList = data.list
                          for (var i in reminderList) {
                            reminderList[i].idPrefix = this.$caseIdFormat(reminderList[i].subscribeType, reminderList[i].subscribeId ? reminderList[i].subscribeId : reminderList[i].id)
                          }

                          this.reminderList = reminderList
                            if (data.list.length === 0 && this.reminderListQuery.page > 1) {
                                this.reminderListQuery.page = 1
                                this.fetchData()
                            }
                            this.listLoading = false
                        }
                    })
                } else if(this.activeName!=='TrainingSchedule'){
                  this.$router.push(`${this.$route.path}?page=Profile`)
                  this.activeName = 'Profile'
                }
                if (this.activeName === 'Profile') {
                    this.listLoading = true
                    // getInfo().then(response => {
                    //     if (response.status !== 0) {
                    //         return false
                    //     }
                    //     this.profile = response.result
                    //     this.profile.body = response.result.userBody
                    //   this.listLoading = false
                    // })
                }
            },
            handleSizeChange(val) {
              this.reminderListQuery.limit = val
              this.fetchData()
            },
            handleCurrentChange(page) {
                this.reminderListQuery.page = page
                this.fetchData()
            },
            handleFilter() {
                this.fetchData()
            },
            getList() {
                // this.listLoading = true
            },
            handleClick(tab) {
              //console.log('tab',tab.name,this.isActiveName)
                if (this.isActiveName !== tab.name) {
                    this.fetchData()
                    this.isActiveName = tab.name
               }
            },
            sort_change(column) {
                this.reminderListQuery.page = 1
                if (column.prop && column.order) {
                    this.reminderListQuery.sorting = column.order === 'ascending' ? 0 : 1
                    this.reminderListQuery.column = column.prop
                    this.fetchData()
                }
            },
            onLook(id, scope) {
                if (scope.row.type === '') {
                    return false
                }

                if((scope.row.type === 'PASSPORT' || scope.row.type === 'HOME_PERMIT')&&this.userType!=='SUPER_ADMIN'){
                  return this.$message({type:'warning',message:'No authority!'})
                }
                lookReminder({ id: id }).then(response => {
                    // let path = getMedicalUrl(subscribeId, subscribeType, type, this.userType)
                    // // dump user info
                    // if (type === 'PASSPORT' || type === 'HOME_PERMIT') {

                    //     getUserInfoid({ userId: memberId }).then(response => {
                    //         path = '/setting/edit?member=' + response.result.member
                    //         const routeUrl = this.$router.resolve({ path: path + '&target=blank' })
                    //         if (path !== undefined) {
                    //             window.open(routeUrl.href, '_blank')
                    //         }
                    //     })
                    // } else {
                    //     const routeUrl = this.$router.resolve({ path: path + '&target=blank' })
                    //     if (path !== undefined) {
                    //         window.open(routeUrl.href, '_blank')
                    //     }
                    // }
                     this.fetchData()
                })
            },
            del(id) {
                this.$confirm('This action will permanently delete this item. Do you want to continue?', 'Tips', {
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                    type: 'warning'
                }).then(() => {
                    delReminder({ id: id }).then(response => {
                        this.$message({
                            type: 'success',
                            message: 'Success!'
                        })
                        this.fetchData()
                    })
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: 'Delete'
                    // })
                })
            }
        }
    }
</script>
